<template>
  <div class="connect">
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%">
        <el-table-column
          prop="areaName"
          :label="$t('Order_module.economize')"
          align="center"
          min-width="180">
        </el-table-column>

        <el-table-column
          prop="gearPosition"
          :label="$t('public.operate')"
          align="center"
          min-width="180">
            <template slot-scope="scope">
                <el-dropdown  @command="changeIndex($event , scope.row)">
                    <span class="el-dropdown-link">
                       {{$t('public.region')+scope.row.gearPosition}} <i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="item.value" v-for="(item,index) in areList" :key="index">{{item.label}}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
           </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
  import {
    area_list,
    area_update
  } from '@/api/wqzApi'
  import store from '@/store'
  import axios from 'axios'
  import CountTo from 'vue-count-to'
  export default {
    components: {
        CountTo
      },
    data() {
      return {
        areList:[
          {label:this.$t('public.region')+'1' , value:1},
          {label:this.$t('public.region')+'2' , value:2},
          {label:this.$t('public.region')+'3' , value:3},
        ],
        tableData:[

        ]
      }
    },

    created() {

    },
    mounted() {
      this.getList()
    },
    destroyed() {

    },
    methods: {
      changeIndex(e , row){
        var data = {
          id:row.id,
          gearPosition:e
        }
        area_update(data).then(res=>{
          console.log('操作成功')
          this.$message({
            type:'success',
            message:this.$t('public.Operation_successful')
          })
          this.getList()
        })
      },
      getList(){
        var data = {
          page:1,
          limit:50
        }
        area_list(data).then(res=>{
          console.log(res)
          this.tableData = res.page.list
        })
      }
    }
  }
</script>

<style scoped>
</style>
